<template>
    <div class="mod-sys__user">
        <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
            <el-form-item>
                <el-button @click="addOrUpdateHandle()">课程选择</el-button>
            </el-form-item>
        </el-form>
        <TableWrapper :valueData="pageList" :columns="columns" :optrations="optrations" @pageSize="pageSize"
            @currentPage="currentPage" :pageCurrent="{...pageCurrent,total}">
        </TableWrapper>
        <add-or-update ref="addOrUpdateRef" @refreshDataList="getList" :scurriculaList="scurriculaList"></add-or-update>
    </div>
</template>

<script lang="ts" setup>
    import useView from "@/hooks/useView";
    import { reactive, ref, toRefs, onMounted } from "vue";
    import TableWrapper from "@/components/table/TableWrapper.vue";
    import AddOrUpdate from "./user-add-or-update.vue";
    import { ElMessage, ElMessageBox } from "element-plus";
    import baseService from "@/service/baseService";
    const scurriculaList = ref([])
    const pageList = ref([])
    const view = reactive({
        getDataListIsPage: true,
    });
    const total = ref('0')
    const pageCurrent = reactive({
        pageNum: '1',
        pageSize: 20
    })
    const columns = ref([
        {
            value: 'courseName',
            label: '课程名称'
        },
        {
            value: 'teacherName',
            label: '授课老师'
        },
        {
            value: 'classRoom',
            label: '上课班级'
        },
        {
            value: 'classTime',
            label: '上课时间'
        },
    ])
    const optrations = [
    {
      name: '退课',
      type: 'primary',
      icon: 'el-icon-plus',
      method: (columns, row) => {
        ElMessageBox.confirm("确定进行[退课]操作?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            baseService
              .delete("/cam/student/dropCourse", {
                id: row.id
              })
              .then((res) => {
                ElMessage.success({
                  message: "成功",
                  duration: 500,
                });
                getList()
              })
          })
          .catch(() => {
            //
          });
      },
      disabled: false
    }
  ]
    onMounted(() => {
        getList()
        getScurriculaList()
    });
    const getList = (name, id) => {
        let param = {
            ...pageCurrent,
            query: {
            }
        };
        baseService
            .post("/cam/student/pageCourse", param)
            .then((res) => {
                if (res.code === 0) {
                    pageList.value = res.data.records
                    total.value = res.data.total
                } else {
                    ElMessage.error(res.msg);
                }
            })
            .catch(() => {
            });

    }
    const pageSize = (val) => {
        pageCurrent.pageSize = val
        getList()
    }
    const currentPage = (val) => {
        pageCurrent.pageNum = val
        getList()
    }
    // 获取课程列表
    const getScurriculaList = () => {
        let param = {
            name: ''
        };
        baseService
            .post("/cam/course/getList", param)
            .then((res) => {
                if (res.code === 0) {
                    scurriculaList.value = res.data
                } else {
                    ElMessage.error(res.msg);
                }
            })
            .catch(() => {
            });
    }
    const addOrUpdateRef = ref();
    const addOrUpdateHandle = (row?: any) => {
        addOrUpdateRef.value.init(row);
    };
    const state = reactive({ ...useView(view), ...toRefs(view) });
</script>